@font-face {
    font-family: BankGothic;
    src: url(../font/bankgthd.ttf);
}

html, body {
    margin: 0;
    padding: 0;
    margin-top:0px;
    border-top:0px;
    background: url("../img/background.jpg");
    background-size: 100% 100%;
    background-repeat: repeat;
}

body{
    margin-top:1%;
    font-family: BankGothic;
    max-height: 100%;
    max-width: 100%;
}

.buttonMain {
    background: transparent;
    /*background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, transparent), color-stop(1, transparent) );
    background:-moz-linear-gradient( center top, transparent 5%, transparent 100% );*/
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='transparent', endColorstr='transparent');
    background-color:transparent;
    text-indent:0px;
    border:9px solid #468fcd;
    display:inline-block;
    color:#FFFFFF;
    font-family:BankGothic;
    font-size:40px;
    font-weight:bold;
    font-style:normal;
    height:10%;
    line-height:65px;
    width:80%;
    text-decoration:none;
    text-align:center;
    margin-left:10%;
    margin-right:10%;
    margin-bottom:5%;
}
.buttonMain:active {
    position:relative;
    top:1px;
}



.floatleft{
    float:left;
}
.centertxt{
    margin:10px;
}

#leftdice{
    background-image: url('img/dice/bckleft.png');
    width:50%;
    height: 100%;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    float:left;
}

#rightdice{
    background: url('img/dice/bckright.png');
    width:50%;
    height: 100%;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    float:left;
}


@-ms-viewport { width: 100vw ; zoom: 100% ; }                           
@viewport { width: 100vw ; zoom: 100% ; }
@-ms-viewport { user-zoom: fixed ; }                                    
@viewport { user-zoom: fixed ; }
.labels {
    color: white;
    background-image:url('testemark.png');
    font-family: 'Lato', sans-serif;
    font-size: 24px;
    font-weight: bold;
    text-align: center;
    width: 50px;  
    padding-top:0px;
    padding-left:0px;

    position: relative;
    float: left;
    height:50px;
}
.homebase {
    color: black;
    background-image:url('testemark.png');
    font-family: 'Lato', sans-serif;
    font-size: 24px;
    font-weight: bold;
    text-align: center;
    width: 50px;  
    padding-top:0px;
    padding-left:0px;

    position: relative;
    float: left;
    height:50px;
}

@media screen and (orientation:portrait) {
    #spinner {
        position: fixed;
        left: 0px;
        top: 0px;
        width: 100vw;
        height: 100vh;
        z-index: 9999;
        background: url(../img/loading_prt.jpg) 50% 50% no-repeat #ede9df;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }

    @media (max-height: 767px){
        #player1lbl{
            position: fixed;
            margin-top:4%;
            margin-left:10%;
        }
        #player2lbl{
            position: fixed;
            margin-top:4%;
            margin-left:10%;
        }
        #dice1div{
            position: fixed;
            margin-top:20%;
            margin-left:5%;
        }
        #dice2div{
            position: fixed;
            margin-top:20%;
            margin-left:15%;
        }

        #list1{
            list-style-type:none;
            position: fixed;
            margin-left:23%;
            margin-top:10%;
        }
        #list2{
            list-style-type:none;
            position: fixed;
            margin-left:-15%;
            margin-top:10%;
        }
        #leftpoints{
            position: fixed;
            margin-top:45%;
            margin-left:7%;
            max-width: 20%;
        }
        #rightpoints{
            position: fixed;
            margin-top:45%;
            margin-left:20%;
        }
    }

    /* tablet */
    @media (min-height: 767px){
        #player1lbl{
            font-size:20px;
            position: fixed;
            margin-top:4%;
            margin-left:10%;
        }
        #player2lbl{
            font-size:20px;
            position: fixed;
            margin-top:4%;
            margin-left:10%;
        }
        #dice1div{
            position: fixed;
            margin-top:20%;
            margin-left:3%;
        }
        #dice2div{
            position: fixed;
            margin-top:20%;
            margin-left:10%;
        }

        #list1{
            font-size:20px;
            list-style-type:none;
            position: fixed;
            margin-left:15%;
            margin-top:5%;
        }
        #list2{
            font-size:20px;
            list-style-type:none;
            position: fixed;
            margin-left:-7%;
            margin-top:5%;
        }
        #leftpoints{
            position: fixed;
            margin-top:40%;
            margin-left:7%;
            max-width: 20%;
        }
        #rightpoints{
            position: fixed;
            margin-top:40%;
            margin-left:20%;
            max-width: 20%;
        }
    }
}

@media screen and (orientation:landscape) {
    #spinner {
        position: fixed;
        left: 0px;
        top: 0px;
        width: 100vw;
        height: 100vh;
        z-index: 9999;
        background: url(../img/loading_lnd.jpg) 50% 50% no-repeat #ede9df;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }
    @media (max-width: 767px){

        #player1lbl{
            position: fixed;
            margin-top:2%;
            margin-left:10%;
        }
        #player2lbl{
            position: fixed;
            margin-top:2%;
            margin-left:10%;
        }
        #dice1div{
            position: fixed;
            margin-top:10%;
            margin-left:5%;
        }
        #dice2div{
            position: fixed;
            margin-top:10%;
            margin-left:15%;
        }

        #list1{
            list-style-type:none;
            position: fixed;
            margin-left:27%;
            margin-top:5%;
        }
        #list2{
            list-style-type:none;
            position: fixed;
            margin-left:-14%;
            margin-top:5%;
        }
        #leftpoints{
            max-width: 15%;
            position: fixed;
            margin-top:30%;
            margin-left:7%;
        }
        #rightpoints{
            max-width: 15%;
            position: fixed;
            margin-top:30%;
            margin-left:15%;
        }
    }
    /* tablet */
    @media (min-width: 767px){

        #player1lbl{
            position: fixed;
            margin-top:2%;
            margin-left:10%;
        }
        #player2lbl{
            position: fixed;
            margin-top:2%;
            margin-left:10%;
        }
        #dice1div{
            position: fixed;
            margin-top:10%;
            margin-left:5%;
        }
        #dice2div{
            position: fixed;
            margin-top:10%;
            margin-left:10%;
        }   

        #list1{
            list-style-type:none;
            position: fixed;
            margin-left:5%;
            margin-top:5%;
        }
        #list2{
            list-style-type:none;
            position: fixed;
            margin-left:-5%;
            margin-top:5%;
        }
        #leftpoints{
            position: fixed;
            margin-top:20%;
            margin-left:0%;
            max-width: 10%;
        }
        #rightpoints{
            position: fixed;
            margin-top:20%;
            margin-left:10%;
            max-width: 10%;
        }
    }
}


#canvas-wrap { 
    position:relative; 
    width:100%; 
    height:100% 
}
#canvas-wrap canvas { 
    position:absolute; 
    top:0; 
    left:0; 
    z-index:999 
}

#overlay     { 
    position:absolute; 
    top:1px; 
    left:1px; 
}    

#clock{
    float: left;
    position: relative;
    height: 0px;
    visibility: hidden;
    width: 0px;

}

.clock{

    float: left;
    position: relative;
    height: 0px;
    visibility: hidden;
    width: 0px;
}

#topBar{
    position: relative;
    width: 0%;
    height: 0%;
    float: left;
    position: relative;
    display: inline;
}

#header{
    width: 0px;
    height: 0px;

}

#content{
    width: 0px;
    height: 0px;
}

#navbar{
    width: 0px;
    height: 0px;
    visibility: hidden;
}

#map-canvas{
    width: 100%;
    height: 100%;
    float: left;
    position: absolute;
    display: inline;
    z-index: 10;
    top: 0px;
    left: 0px;
}

#leftBar{
    width: 8%;
    height: 100%;
    float: left;
    position: relative;
    display: inline;
}

#afui .footer{
    height: 0px;   
}

#contentBar{
    position: absolute;
    height: 100%;
    top: 0px;
    left: 0px;
    width: 100%;
}

#content{
    height: 0px;
    position: relative;
    width: 0px;
    float: left;
}


#message{
    float: left;
    position: relative;
    height: 0px;
    visibility: hidden;
    width: 0px;
}


#dialog-message{
    z-index: 9999;
}

#popUpDice{
    color: white;
    font-size: 15px;
    position: relative;
    visibility: hidden;
    z-index: 999;
    background-image: url("../img/background.jpg") 

}

#logo{
    z-index: 101;  
    position: absolute;
    float: left;
    width: 18%;
    height: auto;
    top: -1px;
    left: -12px;
}

#skullTop{
    z-index: 100;  
    position: absolute;
    top: -1px;
    left:-1px;
    float: left;
    width: 60%;
    height: auto;
    pointer-events:none;
}

#skullLeft{
    z-index: 100;  
    top: 14%;
    left: -1px;
    position: relative;
    width: 10%;
    height: auto;
    float: left;
    pointer-events:none;
}


#popUpColor{
    background: url("../img/background.jpg");
    position: relative;
    visibility: visible;
    width: 100%;
    height: 100%;
}

.imgChoose{
    position: relative;
    display: inline;
    float: left;
    background-position: -18px -15px;
    background-size: 92px;
    height: 60px;
    width: 60px;
    opacity: 0.8;

}

#topcolors, #bottomcolors, #currentColor, #popupbtns{
    position:relative;
    clear:both;
    width:100%;
}

#bottomcolors{
    left:10%;
}
#currentColor{
    left:33%;
}

#yesPopUp
{
    position: relative;
    background: url(../img/colors/yes%20or%20no-01.png);
    background-position: -216px -221px;
    background-size: 689px;
    width: 120px;
    height: 60px;
    display: inline-block;
    cursor: pointer;
    margin-top: 0px;
    padding-right: 0px;
    float: left;
    background-repeat: no-repeat;
    border-radius: 10px 0px 0px 10px;

    /* margin-right: 2px; */
    -webkit-transition: background-color 1s;
    -moz-transition: background-color 1s;
    transition: background-color 1s;    

}

#noPopUp{
    position: relative;
    background: url(../img/colors/yes%20or%20no-01.png);
    background-position: -351px  -221px;
    background-size: 689px;
    width: 120px;
    height: 60px;
    display: inline-block;
    cursor: pointer;
    margin-top: 0px;
    padding-right: 0px;
    float: left;
    background-repeat: no-repeat;
    border-radius: 10px 0px 0px 10px;

    /* margin-right: 2px; */
    -webkit-transition: background-color 1s;
    -moz-transition: background-color 1s;
    transition: background-color 1s;    

}
.ui-dialog-titlebar
{
    display:none;
}

#pointsimg{
    z-index: 999;
    position: absolute;

    float: left;
    left: 14%;
    height: auto;
    width: 7%;


}
